<template>
  <div class="index-modeal-box">
    <search-box />
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      style="margin-top: 30px; height: 400px"
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 6 }"
    >
      <span slot="pic">
        <img style="width: 50px; heigth: 50px" src="@/assets/ops1.png" />
      </span>
    </a-table>
  </div>
</template>

<script>
const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    photo: `Edward King ${i}`,
    author: 32,
    sample: `London, Park Lane no. ${i}`,
    date: "2021-7-31",
  });
}
import searchBox from "@/components/search-box";
export default {
  components: {
    searchBox,
  },
  data() {
    return {
      data,
      selectedRowKeys: [],
      columns: [
        {
          title: "图片",
          dataIndex: "photo",
          scopedSlots: { customRender: "pic" },
          width:200
        },
        {
          title: "艺术家",
          dataIndex: "author",
          width:300
        },
        {
          title: "所属作品",
          dataIndex: "sample",
        },
        {
          title: "时间",
          dataIndex: "date",
        },
      ],
    };
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>

<style>
.index-modeal-box {
  height: 700px;
  padding: 30px;
}
</style>